<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/statics/css/update.css">
    <link rel="stylesheet" href="${ctx}/statics/css/common.css">
    <link rel="stylesheet" href="${ctx}/statics/css/blanceDrop.css">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/bootstrap-table-pagejump/bootstrap-table-pagejump.css">
    <script src="${ctx}/libjs/plugins/bootstrap-table-pagejump/bootstrap-table-pagejump.js"></script>
    <%--<link rel="stylesheet" href="${ctx}/libjs/plugins/laydate/laydate.css">--%>
    <%--<script src="${ctx}/libjs/plugins/laydate/laydate.js"></script>--%>
    <script type="text/javascript" src="${ctx}/appjs/acct/acctContract.js"></script>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>分销商列表</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>电子合同</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

    var has_add = '';
    var has_edit = '';
    var has_delete = '';
</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <input type="hidden" name="operatorStationId" id="operatorStationId"
                   value="${tenantOperatorStation.operatorStationId}">
            <input type="hidden" name="contractPath" id="contractPath"
                   value="${contractPath}">
            <div class="row">
                <div class="ibox-body">
                    <div class="row">
                        <button type="button" class="btn btn-primary" style="margin-top: 0"
                                onclick="acctContract.addAcctContract()">
                            新增
                        </button>
                    </div>
                    <table id="exampleTable" data-mobile-responsive="true">
                    </table>
                    <div class="invoiceModal" id="invoiceModal" style="display: none">
                        <div class="contentBlock">
                            <iframe id="myFrameId" name="myFrameName" src="" scrolling="no" frameborder="0"></iframe>
                            <%--<ul>--%>

                            <%--</ul>--%>
                        </div>
                    </div>


                    <%--  新增合同模态框  --%>
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true"></span></button>
                                    <h4 class="modal-title" id="exampleModalLabel" data-dismiss="modal"
                                        aria-label="Close">
                                        关闭</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="contentForm" class="layui-form">
                                        <input type="hidden" name="operatorStationId"
                                               value="${tenantOperatorStation.operatorStationId}">
                                        <input type="hidden" id="tenantCode" name="tenantCode"
                                               value="${tenantOperatorStation.tenantCode}">
                                        <input type="hidden" name="tenantOperatorCode" id="tenantOperatorCode"
                                               value="${tenantOperatorStation.tenantOperatorCode}">
                                        <div style="margin-bottom: 20px">上传电子合同,有利于实时查看合同内容、实时校对结算规则!</div>
                                        <div class="form-group">
                                            <label class="col-sm-3 col-form-label text-right">合同名称:</label>
                                            <input id="contractName" name="contractName">
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 col-form-label text-right">附件:</label>

                                                <div class="layui-upload-drag" id="uploadFileBox">
                                                    <input type="file" name="file" id="file">
                                                    <i class="layui-icon"></i>
                                                    <p>点击上传文件</p>
                                                    <div class="layui-hide" id="uploadDemoView" style="padding-top: 10px">
                                                        <%--<hr>--%>
                                                        <img src=""  id="contractImg" style="max-width: 196px;">
                                                            <br>
                                                        <span class="hide successTips">pdf文件上传成功!</span>
                                                    </div>
                                                </div>
                                        </div>
                                        <div class="form-group" style="color: #fb4646">仅支持上传pdf,jpg,png格式文件，最大支持10M</div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" id="cancelBtn" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-success" id="addAcctContract">添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    acctContract.init();
    $("#file").change(function () {
        var filesList = this.files;
        if(filesList.length==0){         //如果取消上传，则改文件的长度为0
            $('#uploadDemoView').removeClass('layui-hide');
            $("#contractImg").css("display", "block");
            $("#contractImg").attr("src", objUrl);
            $(".successTips").addClass("hide");
            return
        }
        var objUrl = getObjectURL(this.files[0]);//获取文件信息
        var fileSize = $(this)[0].files[0].size;
        if (fileSize > (10 * 1024 * 1024)) {
            layer.msg('请上传小于10M的文件！');
            $("#file").val("");
            return
        }
        if (objUrl) {
            if(this.files[0].name.indexOf("pdf")>0){
                $("#contractImg").css("display", "none");
                $('#uploadDemoView').removeClass('layui-hide');
                $(".successTips").removeClass("hide");
            }else{
                $('#uploadDemoView').removeClass('layui-hide');
                $("#contractImg").css("display", "block");
                $("#contractImg").attr("src", objUrl);
                $(".successTips").addClass("hide");
            }

        }
    });
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    function errorImg() {
        $("#contractImg").attr("src","${ctx}/statics/img/newEdition/uploadSuccess.jpg").css({"width":"20px","height":"20px"});
        $(".successTips").removeClass("hide");
    }

    $("#cancelBtn").click(function () {
        $("#file").val("");
        $("#contractName").val("");
    })

    function save() {
        var formData = new FormData($("#contentForm")[0]);
        console.log(formData.get("file"))
        $.ajax({
            cache: true,
            type: "POST",
            url: jsctx + "/acctTenantOperator/saveAcctContract",
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            beforeSend:function(){
                parent.layer.msg("上传中...",{time:-1});
            },
            success: function (data) {
                if (data.status == 200) {
                    parent.layer.msg("操作成功");
                    window.history.back();
                } else {
                    parent.layer.alert(data.message)
                }

            },error: function (request) {
                parent.layer.alert("Connection error");
            },
        });
    }

</script>
</body>
</html>